{extend name="../../admin/view/public/admin"}

{block name='content'}

<div class="page-header">当前位置：<span class="text-primary">商品分类</span></div>

<div class="page-content">

    <div class="page-toolbar">
        <span class="pull-left">
            <button type="button" id='btnExpand' class="btn btn-default" data-action='expand'><i class='icon icon-angle-up'></i> 折叠所有</button>
            <a href="{:webUrl('web.goods.category/add')}" class="btn btn-primary"><i class="icon icon-plus"></i> 添加新分类</a>
        </span>
        <div class="input-group"></div>
    </div>

    <form action="" method="post" class="form-validate">

        <div class="dd" id="div_nestable">
            <ol class="dd-list">

                {foreach $category as $key => $row}

                {if empty($row['parentid'])}
                    <li class="dd-item full" data-id="{$row['id']}">

                        <div class="dd-handle">
                            [ID: {$row['id']}] {$row['name']}
                            <span class="pull-right">
                                <div class='label {if $row['enabled']==1}label-primary{else}label-default{/if}'
                                     data-toggle='ajaxSwitch'
                                     data-switch-value='{$row['enabled']}'
                                     data-switch-value0='0|隐藏|label label-default|{:webUrl('web.goods.category/change',array('type' => 'enabled','value'=>1,'id'=>$row['id']))}'
                                     data-switch-value1='1|显示|label label-primary|{:webUrl('web.goods.category/change',array('type' => 'enabled','value'=>0,'id'=>$row['id']))}'
                                     >
                                    {if $row['enabled']==1}显示{else}隐藏{/if}
                                </div>

                                <a class='btn btn-default btn-sm btn-operation btn-op' href="{:webUrl('web.goods.category/add', array('parentid' => $row['id']))}" title=''>
                                    <span data-toggle="tooltip" data-placement="top" title="" data-original-title="添加子分类"><i class="icow icow-tianjia"></i></span>
                                </a>

                                <a class='btn btn-default btn-sm btn-operation btn-op' href="{:webUrl('web.goods.category/edit', array('id' => $row['id']))}">
                                   <span data-toggle="tooltip" data-placement="top" data-original-title="修改">
                                        <i class="icow icow-bianji2"></i>
                                   </span>
                                </a>

                                <a class='btn btn-default btn-sm btn-operation btn-op' data-toggle='ajaxPost' href="{:webUrl('web.goods.category/delete', array('id' => $row['id']))}" data-confirm='确认删除此分类吗？'>
                                    <span data-toggle="tooltip" data-placement="top" title="" data-original-title="删除">
                                        <i class="icow icow-shanchu1"></i>
                                    </span>
                                </a>
                            </span>
                        </div>

                        {if !empty($children) && !empty($children[$row['id']])}
                            {if count($children[$row['id']])>0}
                                <ol class="dd-list">
                                    {foreach $children[$row['id']] as $key1 => $child}
                                        <li class="dd-item full" data-id="{$child['id']}">
                                            <div class="dd-handle" style="width:100%;">
                                                <img src="{:tomedia($child['thumb']);}" width='30' height="30" onerror="$(this).remove()" style='padding:1px;border: 1px solid #ccc;float:left;'/> &nbsp;
                                                [ID: {$child['id']}] {$child['name']}
                                                <span class="pull-right">
                                                    <div class='label {if $child['enabled']==1}label-primary{else}label-default{/if}'
                                                             data-toggle='ajaxSwitch'
                                                             data-switch-value='{$child['enabled']}'
                                                             data-switch-value0='0|隐藏|label label-default|{:webUrl('web.goods.category/change',array('type' => 'enabled','value'=>1,'id'=>$child['id']))}'
                                                             data-switch-value1='1|显示|label label-primary|{:webUrl('web.goods.category/change',array('type' => 'enabled','value'=>0,'id'=>$child['id']))}'
                                                             >
                                                        {if $child['enabled']==1}显示{else}隐藏{/if}
                                                    </div>
                                                    <a class='btn btn-default btn-sm btn-operation btn-op' href="{:webUrl('web.goods.category/add', array('parentid' => $child['id']))}" title='添加子分类'>
                                                       <span data-toggle="tooltip" data-placement="top" title="" data-original-title="添加子分类">
                                                        <i class="icow icow-tianjia"></i>
                                                       </span>
                                                    </a>
                                                    <a class='btn btn-default btn-sm btn-operation btn-op' href="{:webUrl('web.goods.category/edit', array('id' => $child['id']))}" title="">
                                                        <span data-toggle="tooltip" data-placement="top" title="" data-original-title="修改">
                                                            <i class="icow icow-bianji2"></i>
                                                        </span>
                                                    </a>
                                                    <a class='btn btn-default btn-sm btn-operation btn-op' data-toggle='ajaxPost' href="{:webUrl('web.goods.category/delete', array('id' => $child['id']))}" data-confirm="确认删除此分类吗？">
                                                        <span data-toggle="tooltip" data-placement="top" data-original-title="删除">
                                                            <i class="icow icow-shanchu1"></i>
                                                        </span>
                                                    </a>
                                                </span>
                                            </div>

                                            {if !empty($children[$child['id']])}
                                                {if count($children[$child['id']])>0}
                                                    <ol class="dd-list" style='width:100%;'>
                                                        {foreach $children[$child['id']] as $key2 =>  $third}
                                                        <li class="dd-item" data-id="{$third['id']}">
                                                            <div class="dd-handle">
                                                                <img src="{:tomedia($third['thumb']);}" width='30' height="30" onerror="$(this).remove()" style='padding:1px;border: 1px solid #ccc;float:left;'/> &nbsp;
                                                                [ID: {$third['id']}] {$third['name']}
                                                                <span class="pull-right">
                                                                    <div class='label {if $third['enabled']==1}label-primary{else}label-default{/if}'
                                                                        data-toggle='ajaxSwitch'
                                                                        data-switch-value='{$third['enabled']}'
                                                                        data-switch-value0='0|隐藏|label label-default|{:webUrl('web.goods.category/change',array('type' => 'enabled','value'=>1,'id'=>$third['id']))}'
                                                                        data-switch-value1='1|显示|label label-primary|{:webUrl('web.goods.category/change',array('type' => 'enabled','value'=>0,'id'=>$third['id']))}'
                                                                        >
                                                                        {if $third['enabled']==1}显示{else}隐藏{/if}
                                                                    </div>
                                                                    <a class='btn btn-default btn-sm btn-operation btn-op' href="{:webUrl('web.goods.category/edit', array('id' => $third['id']))}" title="">
                                                                        <span data-toggle="tooltip" data-placement="top" title="" data-original-title="修改">
                                                                            <i class="icow icow-bianji2"></i>
                                                                        </span>
                                                                    </a>
                                                                    <a class='btn btn-default btn-sm btn-operation btn-op' data-toggle='ajaxPost' href="{:webUrl('web.goods.category/delete', array('id' => $third['id']))}" data-confirm="确认删除此分类吗？">
                                                                        <span data-toggle="tooltip" data-placement="top" data-original-title="删除">
                                                                            <i class="icow icow-shanchu1"></i>
                                                                        </span>
                                                                    </a>
                                                                </span>
                                                            </div>
                                                        </li>
                                                        {/foreach}
                                                    </ol>
                                                {/if}
                                            {/if}

                                        </li>
                                    {/foreach}
                                </ol>
                            {/if}
                        {/if}
                    </li>
                {/if}
            {/foreach}
            </ol>

            <table class='table'>
                <tr>
                    <td>
                        <input type="submit" class="btn btn-primary" value="保存">
                        <input type="hidden" name="datas" value="" />
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

    </form>

</div>

<script>
    require(['jquery.nestable'], function () {
        $('#btnExpand').click(function () {
            let action = $(this).data('action');
            if (action === 'expand') {
                $('#div_nestable').nestable('collapseAll');
                $(this).data('action', 'collapse').html('<i class="icon icon-angle-up"></i> 展开所有');

            } else {
                $('#div_nestable').nestable('expandAll');
                $(this).data('action', 'expand').html('<i class="icon icon-angle-down"></i> 折叠所有');
            }
        });
        let depth = 3;
        $('#div_nestable').nestable({maxDepth: depth});

        $('.dd-item').addClass('full');

        $(".dd-handle a,.dd-handle div").mousedown(function (e) {
            e.stopPropagation();
        });
        let $expand = false;
        $('#nestableMenu').on('click', function (e) {
            if ($expand) {
                $expand = false;
                $('.dd').nestable('expandAll');
            } else {
                $expand = true;
                $('.dd').nestable('collapseAll');
            }
        });

        $('form').submit(() => {
            let json = window.JSON.stringify($('#div_nestable').nestable("serialize"));
            $(':input[name=datas]').val(json);
        });
    });
</script>

{/block}